<!DOCTYPE html>
<html>

<head>
    <title>Calc</title>
    <style>
        .container {
            border: 1px solid pink;
            width: 250px;
        }

        .box {
            border: 1px solid black;
            height: 100px;
        }
    </style>
</head>

<body>
    <h1>CSS calc() Tests</h1>
    <p>The boxes change their width property.</p>
    <p>calc(100px)</p>
    <div class="container">
        <div class="box" style="width: calc(100px);"></div>
    </div>

    <p>calc(100px + 30% - (2rem * 3 + 20px))</p>
    <div class="container">
        <div class="box" style="width: calc(100px + 30% - (2rem * 3 + 20px));"></div>
    </div>

    <p>calc(100px + 30% - (120px / (2*4 + 3 )))</p>
    <div class="container">
        <div class="box" style="width: calc(100px + 30% - (120px / (2*4 + 3 )));"></div>
    </div>

    <p>calc(100px + 30% - calc(120px / calc(2*4 + 3 )))</p>
    <div class="container">
        <div class="box" style="width: calc(100px + 30% - calc(120px / calc(2*4 + 3 )));"></div>
    </div>

    <p>calc(50% + 60px)</p>
    <div class="container">
        <div class="box" style="width: calc(50% + 60px);"></div>
    </div>

    <p>calc(50% - 60px)</p>
    <div class="container">
        <div class="box" style="width: calc(50% - 60px);"></div>
    </div>

    <p>calc(50% + -60px)</p>
    <div class="container">
        <div class="box" style="width: calc(50% + -60px);"></div>
    </div>

    <p>calc(50% + 50px - 10px)</p>
    <div class="container">
        <div class="box" style="width: calc(50% + 50px - 10px);"></div>
    </div>

    <p>calc(50% + 3*20px)</p>
    <div class="container">
        <div class="box" style="width: calc(50% + 3*20px);"></div>
    </div>

    <p>calc(50% + 3 * 20px)</p>
    <div class="container">
        <div class="box" style="width: calc(50% + 3 * 20px);"></div>
    </div>

    <p>calc(50% + 10.5pt)</p>
    <div class="container">
        <div class="box" style="width: calc(50% + 10.5pt);"></div>
    </div>

    <p>calc(50% + .5pt)</p>
    <div class="container">
        <div class="box" style="width: calc(50% + .5pt);"></div>
    </div>
</body>

</html>
